<template>
  <uni-popup ref="filterPop" :safeArea="false" @change="popChange" @maskClick="closePop">
    <view class="input-pop">
      <view class="header">
        <text>更多查询</text>
        <uni-icons class="close-icon" @click="closePop" type="closeempty" size="20px" color="#CCCCCC" />
      </view>
      <view class="conent-wrap">
        <view class="main">
          <view class="items">
            <view class="label">车牌号</view>
            <view class="items-input">
              <input class="short" maxlength="8" placeholder-style="color:#999999" v-model="filterInput.carBrand"
                placeholder="请输入车牌号" />
            </view>
          </view>
          <view class="items">
            <view class="label">产品</view>
            <view class="items-input">
              <input class="short" maxlength="20" placeholder-style="color:#999999" v-model="filterInput.proName"
                placeholder="请输入产品" />
            </view>
          </view>
          <view class="items">
            <view class="label">状态</view>
            <view class="select-wrap" :style="{
                color: filterInput.waybillStatus.length ? '#333' : '#D9D9D9'
              }" @click="chooseStatus">
              <text>{{ filterInput.waybillStatus.length ? statusText : '请选择状态' }}</text>
              <uni-icons class="select-icon" type="right" size="20" color="#D9D9D9"></uni-icons>
            </view>
          </view>
          <view v-if="type==='采购'" class="items">
            <view class="label">身份证号</view>
            <view class="items-input">
              <input class="short" placeholder-style="color:#999999" v-model="filterInput.carCard"
                placeholder="请输入身份证号" />
            </view>
          </view>
        </view>
        <view class="footer">
          <button class="cancel" plain @click="resetFilter()">重置</button>
          <button plain type="primary" @click="confirmFilter()">搜索</button>
        </view>
        <scroll-view class="scroll-view" scroll-y="true" v-if="chooseStatusFlag">
          <view class="search-box">
            <uni-easyinput ref="easyinputRef" suffixIcon="search" v-model="searchStatus" placeholder="请输入"
              @input="filterStatusList"></uni-easyinput>
          </view>
          <view class="scroll-main" :style="{ height: type=='采购' ?' 460rpx' : '330rpx' }">
            <view :key="index" class="scroll-view-item" @click="statusClickItem(item)"
              :class="{ 'active-item': item.checked }" v-for="(item, index) in statusList">
              <view>{{ item.text }}</view>
              <view class="checked-icon" v-if="item.checked">√</view>
            </view>
          </view>
          <view class="scroll-footer">
            <button class="cancel" plain size="mini" @click="cancleStatus">
              取消
            </button>
            <button plain size="mini" type="primary" @click="confirmStatus">
              确定
            </button>
          </view>
        </scroll-view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
  import { toast } from '@/utils/common';
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: []
      },
      type: String
    },
    watch: {
      async show(flag) {
        if (flag) {
          this.chooseStatusFlag = false;
          this.$refs.filterPop?.open('bottom');
          return;
        }
        this.$refs.filterPop?.close();
      },
      list: {
        handler(value) {
          this.cacheStatusList = value.map(e => {
            e.checked = false
            return e
          })
          this.statusList = JSON.parse(JSON.stringify(this.cacheStatusList))
        },
        immediate: true,
        deep: true
      }
    },
    computed: {
      statusText() {
        return this.statusList.filter(e => this.filterInput.waybillStatus.includes(e.value)).map(m => m.text).join(',');
      }
    },
    data() {
      return {
        statusList: [],
        cacheStatusList: [],
        chooseStatusFlag: false,
        chooseComineFlag: false,
        filterInput: {
          carBrand: undefined,
          proName: undefined,
          waybillStatus: [],
          carCard: undefined
        },
        searchStatus: undefined
      };
    },
    methods: {
      popChange(data) {
        this.$emit('openChange', {
          key: 'isOpenFilterBox',
          show: data.show
        });
      },
      closePop() {
        this.$refs.filterPop?.close();
        this.$emit('closePop')
      },
      resetFilter() {
        this.chooseStatusFlag = false;
        this.searchStatus = undefined;
        this.resetStatusList()
        this.filterInput = {
          carBrand: undefined,
          proName: undefined,
          waybillStatus: [],
          carCard: undefined
        };
      },
      chooseStatus() {
        this.recoverStatusChecked()
        if (this.statusList.length === 0) {
          toast('状态列表暂时为空');
          return;
        }
        this.chooseStatusFlag = true;
        setTimeout(() => {
          this.$refs.easyinputRef?.onClear()
        }, 100)
      },
      filterStatusList(keyword) {
        this.statusList = this.cacheStatusList.filter(e => e.text.includes(keyword))
      },
      statusClickItem(item) {
        this.statusList = this.statusList.map(e => {
          if (item.value === e.value) {
            e.checked = !item.checked
          }
          return e
        })
      },
      cancleStatus() {
        this.searchStatus = undefined;
        this.$refs.easyinputRef?.onClear()
        this.recoverStatusChecked();
        this.chooseStatusFlag = false;
      },
      confirmStatus() {
        this.searchStatus = undefined
        this.$refs.easyinputRef.onClear()
        const filterList = this.statusList.filter(e => !!e.checked).map(m => m.value)
        this.filterInput.waybillStatus = filterList
        this.chooseStatusFlag = false;
      },
      confirmFilter() {
        const data = JSON.parse(JSON.stringify(this.filterInput))
        data.waybillStatus = data.waybillStatus.join(',')
        this.$emit('filterChange', data);
        this.$refs.filterPop?.close();
      },
      recoverStatusChecked() {
        this.statusList = this.statusList.map(e => {
          if (this.filterInput.waybillStatus.includes(e.value)) {
            e.checked = true;
          } else {
            e.checked = false;
          }
          return e;
        })
      },
      resetStatusList() {
        this.cacheStatusList = this.cacheStatusList.map(e => {
          e.checked = false
          return e
        })
        this.statusList = JSON.parse(JSON.stringify(this.cacheStatusList))
      }
    }
  };
</script>
<style lang="scss" scoped>
  .input-pop {
    border-radius: 10px 10px 0 0;
    background-color: #ffffff;

    .conent-wrap {
      display: flex;
      flex-direction: column;
      position: relative;
      max-height: 55vh;
    }

    .header {
      position: relative;
      padding: 21.33rpx 35.56rpx;
      text-align: center;
      border-bottom: 1.78rpx solid #eaeaea;

      .close-icon {
        position: absolute;
        right: 35.56rpx;
      }

      text {
        font-size: 26.67rpx;
        font-weight: bold;
      }
    }

    .main {
      padding: 35.56rpx 35.56rpx 0 35.56rpx;
      flex: 1;
      height: 0;
      overflow-y: auto;
    }

    .footer {
      padding: 21.33rpx 35.56rpx 0 35.56rpx;
      display: flex;
      justify-content: space-between;
    }

    button {
      width: 45%;
      margin-top: 17.78rpx;
      height: 71.11rpx !important;
      font-size: 28.44rpx !important;
      line-height: 71.11rpx !important;
    }

    button[type="primary"] {
      color: #ffffff;
      background-color: #409eff;
    }

    button.cancel {
      border: 0 !important;
      color: #666666 !important;
      background-color: #eeeff2 !important;
    }
  }

  .scroll-view {
    position: absolute;
    padding: 17.78rpx 35.56rpx 0 35.56rpx;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    background-color: #fff;

    .scroll-view-item+.scroll-view-item {
      margin-top: 10.67rpx;
    }

    .search-box {
      margin: 0 0 23.11rpx 5.33rpx;
    }

    .scroll-view-item {
      display: flex;
      justify-content: space-between;
      padding: 14.22rpx 17.78rpx;
      border-radius: 7.11rpx;
      background-color: #f2f6fc;

      .checked-icon {
        font-size: 24.89rpx;
        font-weight: bold;
      }
    }

    .scroll-main {
      overflow-y: auto;
    }

    .scroll-footer {
      display: flex;
      justify-content: space-between;
    }
  }

  .active-item {
    color: #fff !important;
    background-color: #409eff !important;
  }

  .items {
    margin-bottom: 17.78rpx;
    display: block;

    .middle-icon {
      padding: 0 7.11rpx;
    }

    .label {
      width: 80px;
      margin-bottom: 7.11rpx;
      display: flex;
      align-items: center;

      >text {
        color: red;
      }
    }

    .items-input {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: start;
    }

    input {
      flex: 1;
      height: 71.11rpx;
      color: #999;
      line-height: 71.11rpx;
      border-radius: 7.11rpx;
      padding: 0px 17.78rpx;
      border: 1.78rpx solid #e5e5e5;
    }

    .select-wrap {
      position: relative;
      flex: 1;
      height: 71.11rpx;
      padding: 0 17.78rpx;
      color: #808080;
      line-height: 71.11rpx;
      border-radius: 7.11rpx;
      border: 1.78rpx solid #e5e5e5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .select-icon {
        position: absolute;
        right: 10rpx;
      }
    }

    .address-box {
      display: flex;
      flex: 1;

      button {
        width: 36%;
        margin-left: 17.78rpx;
      }
    }

    button {
      margin-top: 0 !important;
    }
  }
</style>